<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>JpGraph Manual (ver:30 Oct 2002 09:48)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<STYLE TYPE="text/css"><!--
BODY { font-family: serif }
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
H4 { font-family: sans-serif }
H5 { font-family: sans-serif }
H6 { font-family: sans-serif }
SUB { font-size: smaller }
SUP { font-size: smaller }
PRE { font-family: monospace }
A { text-decoration: none }
--></STYLE>
</HEAD>
<BODY>
<IMG  src="img/JpGraph_Logo.png">
<A HREF="index.html">Contents</A>
<A HREF="4010radarplot.html">Previous</A>
<A HREF="6csimdoc.html">Next</A>
<HR>
<H2><A NAME="7_2">7.2 Pie plots</A></H2>
 So fvar we have just show plots based on an X-Y coordinate system. This
 is not the only types of graphs you can create with JpGraph. Another
 common type is Pie plots. JpGraph supports both 2D and 3D pie plots.
 For 2D pie plots there are also 2 versions, but more on that later.
<P> The main difference as compared to the X-Y plots is that to all pie
 plots are added to the<A href="../ref/PieGraph.html#_C_PIEGRAPH">
 PieGraph()</A> instead of the Graph() object we used for the X-Y graphs
 we have drawn so far. For this you must first include the
 &quot;jpgraph_pie.php&quot; in your script (or &quot;jpgraph_pie3d.php&quot; if you want to
 use 3-dimensional pies).</P>
<P> Below you cane see the code needed to create the simplest possible
 pie graph just using the default settings.</P>
<P>
<BR> &nbsp;
<BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
<B><CODE><FONT color="#000000"><FONT color="#0000CC"></FONT><FONT color="#006600">
 include&nbsp;(</FONT><FONT color="#CC0000">&quot;../jpgraph.php&quot;</FONT><FONT color="#006600">
);
<BR />include&nbsp;(</FONT><FONT color="#CC0000">&quot;../jpgraph_pie.php&quot;</FONT><FONT
color="#006600">);
<BR />
<BR /></FONT><FONT color="#0000CC">$data&nbsp;</FONT><FONT color="#006600">
=&nbsp;array(</FONT><FONT color="#0000CC">40</FONT><FONT color="#006600">,</FONT><FONT
color="#0000CC">60</FONT><FONT color="#006600">,</FONT><FONT color="#0000CC">
21</FONT><FONT color="#006600">,</FONT><FONT color="#0000CC">33</FONT><FONT
color="#006600">);
<BR />
<BR /></FONT><FONT color="#0000CC">$graph&nbsp;</FONT><FONT color="#006600">
=&nbsp;new&nbsp;</FONT><FONT color="#0000CC">PieGraph</FONT><FONT color="#006600">
(</FONT><FONT color="#0000CC">300</FONT><FONT color="#006600">,</FONT><FONT
color="#0000CC">200</FONT><FONT color="#006600">);
<BR /></FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">-&gt;</FONT><FONT
color="#0000CC">SetShadow</FONT><FONT color="#006600">();
<BR />
<BR /></FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">-&gt;</FONT><FONT
color="#0000CC">title</FONT><FONT color="#006600">-&gt;</FONT><FONT color="#0000CC">
Set</FONT><FONT color="#006600">(</FONT><FONT color="#CC0000">&quot;A simple
 Pie plot&quot;</FONT><FONT color="#006600">);
<BR />
<BR /></FONT><FONT color="#0000CC">$p1&nbsp;</FONT><FONT color="#006600">
=&nbsp;new&nbsp;</FONT><FONT color="#0000CC">PiePlot</FONT><FONT color="#006600">(</FONT><FONT
color="#0000CC">$data</FONT><FONT color="#006600">);
<BR /></FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">-&gt;</FONT><FONT
color="#0000CC">Add</FONT><FONT color="#006600">(</FONT><FONT color="#0000CC">
$p1</FONT><FONT color="#006600">);
<BR /></FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">-&gt;</FONT><FONT
color="#0000CC">Stroke</FONT><FONT color="#006600">();
<BR /></FONT><FONT color="#0000CC"></FONT></FONT></CODE></B></DIV></P>
<P> The above code would give the following pie graph</P>
<P><DIV align="center">
<BR><A href="exframes/frame_example26.html"> <IMG border="0" HEIGHT="200"
 src="img/example26.png" WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 1:</B> The simplest possible pie graph<A href="exframes/frame_example26.html">
 [src]</A></EM></SMALL></DIV></P>
<P> There is a few things worth noting here</P>
<UL>
<LI> By default all pie slices have the percentage shown just outside
 the slice.</LI>
<LI> The colors are automatically assigned to the slices.</LI>
<LI> The pie have the edges marked by default</LI>
<LI> The fisr slice start at 0 degrees (3 a'clock)</LI>
</UL>
 You can change allmost all aspects of apperance of the pie graphs. For
 example you could change :
<UL>
<LI> Change the angle for the first slice, (<A href="../ref/PiePlot.html#_PIEPLOT_SETSTARTANGLE">
PiePlot::SetStartAngle()</A>)</LI>
<LI>Remove the border lines around the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">
PiePlot::ShowBorder()</A>)</LI>
<LI>Change the color of the border (<A href="../ref/PiePlot.html#_PIEPLOT_SETCOLOR">
PiePlot::SetColor()</A>,</LI>
<LI>Change the colors of the slices (<A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">
PiePlot::SetSliceCOlors()</A>)</LI>
<LI> Change the size and position of the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
PiePlot::SetSize()</A>,<A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER">
 PiePlot::SetCenter()</A>)</LI>
<LI> Adjust the labels for the slice (color, font, format, position ) by
 accessing the<A href="../ref/DisplayValue.html#_C_DISPLAYVALUE"> value
 property</A> of pie plots, for example (<A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFONT">
PiePlot::value::SetFont()</A>, You can read more about label formatting
 and how to change what is displayed as a value further down in this
 chapter.</LI>
</UL>
<P> The next simplest addition we can do is to add a legend to the pie
 graph. We do this by using the<A href="../ref/PiePlot.html#_PIEPLOT_SETLEGENDS">
 SetLegends();</A> method. By adding the legends to the previous example
 we get the following image</P>
<P><DIV align="center">
<BR><A href="exframes/frame_example26.1.html"> <IMG border="0" HEIGHT="200"
 src="img/example26.1.png" WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 2:</B> Adding a legend to the pie graph<A href="exframes/frame_example26.1.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
<P> (In the figure above we also moved the center of the pie slightly to
 the left to make more room for the legend box.)</P>
<P> The text for the legends can also contain printf() style format
 strings to format a number. This number passed on into this string is
 either the absolute value of the slice or the percentage value. How to
 switch between the is describe further down in this chapter.</P>
<P> The next change you might want to change is the size and position of
 the Pie plot. You can change the size with a call to<A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
 SetSize();</A> and the position of the center of the pie plot with a
 call to<A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER"> SetCenter();</A>
 The size can be specified as either an absolute size in pixels or as a
 fraction of width/height (whatever is the smallest). The position of
 the pie plot is specified as a fraction of the width and height.</P>
<P> To put the size and positioning API to use we will show how to put
 several pie plots on the same pie graph. In the following example we
 have also adjusted the legends of the slice values to use a smaller
 font.</P>
<P> What we do in this example is quite simple, create 4 pie plots, make
 them smaller and put them in the four corner of the graph. This will
 give the result as shown in the following example.</P>
<P><DIV align="center">
<BR><A href="exframes/frame_pieex3.html"> <IMG border="0" HEIGHT="300"  src="img/pieex3.png"
WIDTH="350"></A>
<BR><SMALL><EM><B>Figure 3:</B> Multiple pie plots in the same pie graph<A
href="exframes/frame_pieex3.html"> [src]</A></EM></SMALL></DIV></P>
<P></P>
<H3><A NAME="7_2_1">7.2.1 Creating 3D pie plots</A></H3>
 So far we have only made use of 2D pie plots, creating 3D pie plots is
 no more difficult. Instead of creating the plots with a call to
 PiePlot() you create the plots with a call to<A href="../ref/PiePlot3D.html#_C_PIEPLOT3D">
 PiePlot3D()</A> If we just take the first simple pie plot and replace
 the call to PiePlot() with a call to PiePlot3D() we get the following
 result.
<P><DIV align="center">
<BR><A href="exframes/frame_example27.html"> <IMG border="0" HEIGHT="200"
 src="img/example27.png" WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 4:</B> A first example of a 3D pie plot<A href="exframes/frame_example27.html">
 [src]</A></EM></SMALL></DIV></P>
<P> 3D Pie plots have the same possibilities as the normal pie plots
 with the added twist of a 3:rd dimension. You can adjust the
 perspective angle with the method<A href="../ref/PiePlot3D.html#_PIEPLOT3D_SETANGLE">
 SetAngle()</A> So for example to make the pie more &quot;flat&quot; you just set
 it to a smaller angle. Setting the perspective angle to 20 degrees in
 the previous example will give the following result.</P>
<P><DIV align="center">
<BR><A href="exframes/frame_example27.1.html"> <IMG border="0" HEIGHT="200"
 src="img/example27.1.png" WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 5:</B> Adjusting the perspective angle<A href="exframes/frame_example27.1.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
<H3><A NAME="7_2_2">7.2.2 Exploding pie slices</A></H3>
 One way to attract attention to some specific piece of information in a
 pie chart is to &quot;explode&quot; one or more slices. Both 2D and 3D pies
 support exploding one or several slices.
<P> Explding slices is accomplished by the methods<A href="../ref/PiePlot.html#_PIEPLOT_EXPLODE">
 Explode()</A> and<A href="../ref/PiePlot.html#_PIEPLOT_EXPLODESLICE">
 ExplodeSlice()</A> The first method is used if you want to explode more
 than one slices and the second is a shorthand to make it easy to just
 explode one slice.</P>
<P> For example to explode one slice the default &quot;explode&quot; radius you
 would just have to say
<BR> &nbsp;
<BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
<B><CODE><FONT color="#000000"><FONT color="#0000CC"> $pieplot</FONT><FONT
color="#006600">-&gt;</FONT><FONT color="#0000CC">ExplodeSlice</FONT><FONT color="#006600">
(</FONT><FONT color="#0000CC">1</FONT><FONT color="#006600">)</FONT><FONT
color="#0000CC"></FONT></FONT></CODE></B></DIV></P>
<P> The above line would explode the second slice (slices are numbered
 from 0 and upwards) the default amount. Doing this to the two previous
 example would result in</P>
<TABLE>
<TR><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example27.2.html"> <IMG border="0" HEIGHT="200"
 src="img/example27.2.png" WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 6:</B> Exploding one slice<A href="exframes/frame_example27.2.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example27.3.html"> <IMG border="0" HEIGHT="200"
 src="img/example27.3.png" WIDTH="330"></A>
<BR><SMALL><EM><B>Figure 7:</B> Exploding one 3D slice<A href="exframes/frame_example27.3.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD></TR>
</TABLE>
 To explode all slices at once you can use the<A href="../ref/PiePlot.html#_PIEPLOT_EXPLODEALL">
 PiePlot::ExplodeAll()</A> method. If you want to explode several slices
 you can use the<A href="../ref/PiePlot.html#_PIEPLOT_EXPLODE">
 PiePlot::Explode()</A> method and supply a suitable array argument.
<H3><A NAME="7_2_3">7.2.3 Specifying and adjusting labels on pie plots</A>
</H3>
 By default the values shown just outside the pie for each slice are the
 percentage value for each slice. If you instead wanted the absolute
 value you would just have to use the<A href="../ref/PiePlot.html#_PIEPLOT_SETLABELTYPE">
 SetLabelType()</A> method. So to use the absolute value you would call
<P>
<BR> &nbsp;
<BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
<B><CODE><FONT color="#000000"><FONT color="#0000CC"> $pieplot</FONT><FONT
color="#006600">-&gt;</FONT><FONT color="#0000CC">SetLabelType</FONT><FONT color="#006600">
(</FONT><FONT color="#CC0000">&quot;PIE_VALUE_ABS&quot;</FONT><FONT color="#006600">
);</FONT><FONT color="#0000CC"></FONT></FONT></CODE></B></DIV></P>
<P></P>
<P> Furthermore you could enhance the formatting of the value by either
 using a printf() style format string (using<A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFORMAT">
 SetFormat()</A> ) or by providing a formatting function callback (using<A
href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFORMATCALLBACK">
 SetFormatCallback()</A> ) for doing more advanced formatting.</P>
<P> You can also adjust the position of the labels by means of the<A href="../ref/PiePlot.html#_PIEPLOT_SETLABELPOS">
 PiePlot::SetLabelPos()</A> method. The argument to this method is
 either the fraction of the radius or the string 'auto'. In the latter
 case JpGraph automatically determines the best position and the the
 first case The following example illustrates this</P>
<P><DIV align="center">
<BR><A href="exframes/frame_pieex8.html"> <IMG border="0" HEIGHT="200"  src="img/pieex8.png"
WIDTH="250"></A>
<BR><SMALL><EM><B>Figure 8:</B> Example of adjusting the position of the
 labels for the slices<A href="exframes/frame_pieex8.html"> [src]</A></EM>
</SMALL></DIV></P>
<P></P>
<P> If this formatting is not enough you can also &quot;manually&quot; specify the
 labels for each slice individually. You do this by using the<A href="../ref/PiePlot.html#_PIEPLOT_SETLABELS">
 PiePLot::SetLabels()</A> method. This will let you specify individual
 text strings for each label. In each specification you can also add a
 printf() formatting specification for a number. The number passed on
 will be either the absolute value for the slice or the percentage value
 depending on what was specified in the call to<A href="../ref/PiePlot.html#_PIEPLOT_SETLABELTYPE">
 SetLabelType()</A></P>
<P> The SetLabels() method can also take a second parameter, the label
 position parameter. This is just a shortcut to the SetLabelPos() as
 described above. By default the position will be sert to 'auto' if not
 explicetely specified.</P>
<P></P>
<HR> <SMALL><STRONG> Note:</STRONG> The alignment of the labels will be
 different depending on wheter they are inside or outside the pie. When
 inside the center of the strings will be aligned with the center of the
 slice at the specified fraction of the radius. When positioned outside
 the alignment will depend on the angle to avoid that the labels
 inadvertedly writes over the pie.</SMALL>
<HR>
<H3><A NAME="7_2_4">7.2.4 Specifying slice colors and using themes</A></H3>
 Another typical change would be to change the colors of the slices.
 There are two fundamental ways of doing this. You either manually
 specify the colors for the slices as an array using the method<A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">
 SetSliceColors()</A> If you specify fewer colors than the number of
 slices they will just wrap around.
<P> Another way is to use one of the pre-defined color &quot;themes&quot;. This is
 just a predefined set of colors that will be used for the slices. You
 choose what &quot;theme&quot; you like to use with the method (<A href="../ref/PiePlot.html#_PIEPLOT_SETTHEME">
 SetTheme()</A> ) At the time of this writing the available themes are</P>
<UL>
<LI> &quot;earth&quot;</LI>
<LI> &quot;pastel&quot;</LI>
<LI> &quot;sand&quot;</LI>
<LI> &quot;water&quot;</LI>
</UL>
 The following example shows the same pie using the different &quot;themes&quot;
 in order.
<TABLE>
<TR><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example28.html"> <IMG border="0" HEIGHT="150"
 src="img/example28.png" WIDTH="150"></A>
<BR><SMALL><EM><B>Figure 9:</B><A href="exframes/frame_example28.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example28.1.html"> <IMG border="0" HEIGHT="150"
 src="img/example28.1.png" WIDTH="150"></A>
<BR><SMALL><EM><B>Figure 10:</B><A href="exframes/frame_example28.1.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example28.2.html"> <IMG border="0" HEIGHT="150"
 src="img/example28.2.png" WIDTH="150"></A>
<BR><SMALL><EM><B>Figure 11:</B><A href="exframes/frame_example28.2.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD><TD>
<P><DIV align="center">
<BR><A href="exframes/frame_example28.3.html"> <IMG border="0" HEIGHT="150"
 src="img/example28.3.png" WIDTH="150"></A>
<BR><SMALL><EM><B>Figure 12:</B><A href="exframes/frame_example28.3.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
</TD></TR>
</TABLE>
 A complete color chart of all available colors in the different themese
 can be found<A href="themes.html"> here</A>
<P> Another simple change is to remove the border ( or change it's
 colors ) that separates each slice. This can be done by a call to<A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">
 ShowBorder()</A></P>
<H3><A NAME="7_2_5">7.2.5 Adding drop shadows to the slices</A></H3>
 An additional visual enhancements can be made by adding a drop shadow
 to the individual slices. This is accomplished by means of the<A href="../ref/PiePlot.html#_PIEPLOT_SETSHADOW">
 PiePlot::SetShadow()</A> method. Adding a drop shadow is often more
 affective if the pie has one or more slices exploded as the following
 example shows
<P><DIV align="center">
<BR><A href="exframes/frame_pieex9.html"> <IMG border="0" HEIGHT="200"  src="img/pieex9.png"
WIDTH="250"></A>
<BR><SMALL><EM><B>Figure 13:</B> Adding a drop hadow to the slices<A href="exframes/frame_pieex9.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
<H3><A NAME="7_2_6">7.2.6 Another variant of 2D Pie plots</A></H3>
 As mentioned in the beginning there are two versions of the 2D pie
 plots. The normal pie plot created as an instance of<A href="../ref/PiePlot.html#_C_PIEPLOT">
 class PiePlot</A> and a variant created as an instance of<A href="../ref/PiePlot.html#_C_PIEPLOTC">
 class PiePlotC</A>
<P> This variant is an extension of the standard PiePlot in the sense
 that it also have a filled circle in the center. The following example
 illustrates this</P>
<P></P>
<P><DIV align="center">
<BR><A href="exframes/frame_piecex1.html"> <IMG border="0" HEIGHT="300"  src="img/piecex1.png"
WIDTH="300"></A>
<BR><SMALL><EM><B>Figure 14:</B> Example of the variant of pie plot with
 a filled center circle<A href="exframes/frame_piecex1.html"> [src]</A></EM>
</SMALL></DIV></P>
<P></P>
<P> Since the PiePlotC is an extension to the basic pie plot all the
 normal formatting you can do for pie plots you can also do for the
 PiePlotC .</P>
<P> The additional formatting only concerns the filled middle circle.
 You have the option of adjusting size, fill color and all font
 properties. You perform these operations with the methods</P>
<TABLE>
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDCOLOR">
PiePlotC::SetMidColor()</A></TD><TD>Set fill color of mid circle</TD></TR>
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDSIZE">
PiePlotC::SetMidSize()</A></TD><TD>Set size (fraction of radius)</TD></TR>
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDTITLE">
PiePlotC::SetMidTitle()</A></TD><TD>Set title string (may be
 multi-lined)</TD></TR>
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMID">
PiePlotC::SetMid()</A></TD><TD>Set all parameters in a single method
 call</TD></TR>
</TABLE>
 In addition to the normal CSIM for PiePlot:s the center area is also a
 CSIM hotspot. You specify the target CSIM with a call to<A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDCSIM">
 PiePlotC::SetMidCSIM()</A>
<P> The next example shows an example with some more innovative
 formatting. In this example we have :</P>
<UL>
<LI> hidden the frame around the pie graph</LI>
<LI> exploded all the slices</LI>
<LI> added drop shadow to the individual slices (and the center filled
 circle)</LI>
<LI> specified individual multi line labels.</LI>
<LI> changed the font for the title to a TTF font.</LI>
</UL>
<P><DIV align="center">
<BR><A href="exframes/frame_piecex2.html"> <IMG border="0" HEIGHT="400"  src="img/piecex2.png"
WIDTH="400"></A>
<BR><SMALL><EM><B>Figure 15:</B> PiePlotC with some more innovative
 formatting to make it more interesting.<A href="exframes/frame_piecex2.html">
 [src]</A></EM></SMALL></DIV></P>
<P></P>
<P></P>
<HR>
<IMG  src="img/JpGraph_Logo.png">
<A HREF="index.html">Contents</A>
<A HREF="4010radarplot.html">Previous</A>
<A HREF="6csimdoc.html">Next</A>
</BODY>
</HTML>
